<template>
  <el-card>
    
      <!-- 1. 上传单张图片 -->
      <div style="text-align: center; width: 15%;">
        <div 
          @click="() => openDialog(1, 'single')"
          style="cursor: pointer; border: 1px dashed #dcdfe6; border-radius: 4px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;"
          :style="singleImage ? 'display: none' : ''"
        >
          <div style="text-align: center; color: #909399;">
            <el-icon style="font-size: 28px; margin-bottom: 8px;"><Plus /></el-icon>
            <div>点击上传</div>
          </div>
        </div>
        
        <!-- 单图预览 -->
        <div v-if="singleImage" style="position: relative; height: 120px; margin-bottom: 10px; border-radius: 4px; overflow: hidden;">
          <img :src="singleImage" style="width: 100%; height: 100%; object-fit: cover;">
          <div class="image-actions">
            <el-button type="danger" circle size="small" style="position: absolute; top: 5px; right: 5px;" @click.stop="singleImage = ''">
              <el-icon><Delete /></el-icon>
            </el-button>
            <el-button type="primary" circle size="small" @click.stop="previewImage([singleImage], 0)">
              <el-icon><View /></el-icon>
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 2. 上传视频 -->
      <div style="width: 15%;">  
        <div 
          @click="() => openDialog(2, 'video')"
          style="cursor: pointer; border: 1px dashed #dcdfe6; border-radius: 4px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;"
          :style="videoUrl ? 'display: none' : ''"
        >
          <div style="text-align: center; color: #909399;">
            <el-icon style="font-size: 28px; margin-bottom: 8px;"><VideoCamera /></el-icon>
            <div>点击上传</div>
          </div>
        </div>
        
        <!-- 视频预览 -->
        <div v-if="videoUrl" style="position: relative; height: 120px; margin-bottom: 10px; border-radius: 4px; overflow: hidden;">
          <video 
            ref="videoRef" 
            controls 
            style="width:100%; height:120px; object-fit:cover;"
            :src="videoUrl"
          ></video>
          <div style="opacity: 0; "
            onmouseover="this.style.opacity='1'"
            onmouseout="this.style.opacity='0'">
            <el-button type="danger" circle size="small" style="position: absolute; top: 5px; right: 5px;" @click.stop="clearVideo">
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>
      </div>
      
  <!-- 多图预览容器 -->
    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
          <!-- 上传按钮 -->
          <div 
            v-if="multiImages.length < maxCount"
            @click="() => openDialog(1, 'multi')" 
            style="width: 15%; height: 120px; display: flex; cursor: pointer; border: 1px dashed #dcdfe6; border-radius: 4px; align-items: center; justify-content: center;">
            <div style="text-align: center; color: #909399;">
              <el-icon style="font-size: 28px; margin-bottom: 8px;"><Plus /></el-icon>
              <div>点击上传</div>
            </div>
          </div>
          
          <!-- 多图预览 -->
          <div
            v-for="(img, index) in multiImages"
            :key="index"
            style="width: 15%; height: 120px; position: relative; border-radius: 4px; overflow: hidden;"
          >
            <img :src="img" style="width: 100%; height: 100%; object-fit: cover;">
              <div class="image-actions">
              <el-button type="danger" circle size="small" style="position: absolute; top: 5px; right: 5px;" @click.stop="multiImages.splice(index, 1)">
                <el-icon><Delete /></el-icon>
              </el-button>
              
              <el-button type="primary" circle size="small" @click.stop="previewImage(multiImages, index)">
                <el-icon><View /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
 
       
    
    <!-- 素材选择对话框 -->
    <el-dialog v-model="dialogVisible" title="选择素材" width="1000px" destroy-on-close>
      <manage :flag="mediaType" @selectImage="selectMedia" />
    </el-dialog>
    
    <!-- 图片预览组件 -->
    <el-image-viewer
      v-if="previewVisible"
      :url-list="previewImages"
      :initial-index="previewIndex"
      @close="previewVisible = false"
    />
  </el-card>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { Plus, Delete, View, VideoCamera } from '@element-plus/icons-vue'
import manage from "@/views/function/material/Image/index.vue"

// 定义emit事件
const emit = defineEmits(['upload-success'])

// 状态数据 - 简化为必要变量
const dialogVisible = ref(false)
const mediaType = ref(1)     // 1=图片，2=视频
const uploadMode = ref('')   // 'single'=单张图片, 'multi'=多张图片, 'video'=视频
const singleImage = ref('')  // 单张图片URL
const videoUrl = ref('')     // 视频URL
const multiImages = ref([])  // 多张图片URL数组
const videoRef = ref(null)   // 视频元素引用

// 预览相关
const previewVisible = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)

// 打开素材选择对话框
function openDialog(type, mode) {
  mediaType.value = type
  uploadMode.value = mode
  dialogVisible.value = true
}
// 
const maxCount = 5;
// 选择媒体后的回调
function selectMedia(url) {
  dialogVisible.value = false
  
  if (mediaType.value === 1) { // 图片
    if (uploadMode.value === 'single') {
      singleImage.value = url
      // 发送上传成功事件给父组件
      emit('upload-success', url)
    } else if (uploadMode.value === 'multi') {
      if (multiImages.value.length < maxCount) {
        multiImages.value.push(url)
      } else {
        // 可以添加提示，已达到最大上传数量
      }
    }
  } else { // 视频
    videoUrl.value = url
  }
}

// 清除视频
function clearVideo() {
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.src = ''
  }
  videoUrl.value = ''
}

// 预览图片
function previewImage(images, index) {
  previewImages.value = images
  previewIndex.value = index
  previewVisible.value = true
}

</script>

<style scoped>
/* 图片悬浮显示 */
.image-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}
*:hover > .image-actions {
  opacity: 1;
}



.video-delete-btn {
  z-index: 10;
}

div:hover .video-delete-btn {
  opacity: 1;
}
</style>